<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
        <div class="widget am-cf">
            <div class="widget-head am-cf">
                <div class="widget-title am-fl">展示设置</div>
                <div class="widget-function am-fr">
                    <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
                </div>
            </div>
            <div class="widget-body  am-fr">
                <ul id="treeDemo" class="ztree"></ul>
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-sm-centered " align="center">
                        <button type="button" class="am-btn am-btn-primary" @click="save">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

  </div>
</template>

<script>

  require('../../../static/ztree/zTreeStyle.css')
  require('../../../static/ztree/jquery.ztree.all.min.js')
  import io from '../../lib/io'

  export default{
    data: function () {
      return {
        areaTeamId:'',
      }
    },
    components: {

    },
    created: function () {
      this.areaTeamId = this.$route.query.areaTeamId

      setTimeout(function () {
        var link = document.createElement('link')
        link.setAttribute("rel", "stylesheet")
        link.setAttribute("type", "text/css")
        link.setAttribute("href", 'static/ztree/zTreeStyle.css')
        document.getElementsByTagName("head")[0].appendChild(link)
      })

    },
    mounted: function () {
      var _this = this
      _this.loadPeriodCampusGrade()
    },

    methods: {
      save: function () {

        var sNodes = this.$zTree.getCheckedNodes().filter((item)=> item.id.indexOf('Node') > 0 )
        let periodIds  = Array.from( new Set(sNodes.map((item)=>item.id.split('|')[0])));
        let periods  = []
        for(var i = 0 ; i < periodIds.length ; i++ ){
            let periodId  = periodIds[i]
            let nodes = sNodes.filter((item)=>item.id.indexOf(periodId) != -1)

            let gradeIds = nodes.filter((item)=>item.id.indexOf('gradeNode') != -1).map((item)=>item.id.split('|')[1])
            let campusIds = nodes.filter((item)=>item.id.indexOf('campusNode') != -1).map((item)=>item.id.split('|')[1])
            periods.push({
              periodId:periodId,
              gradeIds :gradeIds,
              campusIds:campusIds

            })

        }
        console.log(periods)
        var _this = this
        io.post(io.saveDisplayConfig, {
          config : JSON.stringify({
            areaTeamId : _this.areaTeamId,
            periods: periods
          })
        },
          function (ret) {
            if (ret.success) {
              _this.$toast('OK')
              _this.$root.$emit('reloadConfig')
              _this.$router.push('/main/online/showSetting')
            }
          },
          function () {
            _this.$alert('请求服务器失败')
          })

      },
      loadPeriodCampusGrade: function () {
        var _this = this
        let param = {
          areaTeamId:_this.areaTeamId
        }
        io.post(io.periodCampusGradeForCourseDisplayConfig,param,
          function (ret) {
            if (ret.success) {
              let periods = ret.data.periods;
              let grades = ret.data.grades;
              let campuses = ret.data.campuses;
              let zNodes = []
              for(var i = 0 ; i < periods.length ; i++ ){

                let period = periods[i]

                  zNodes.push({
                  id : period.periodId,
                  name : period.periodName
                })

                zNodes.push({
                  id : period.periodId + '|grade' ,
                  pId : period.periodId,
                  name :'年级'
                })

                zNodes.push({
                  id : period.periodId + '|campus' ,
                  pId : period.periodId,
                  name :'校区'
                })

                for(var gi = 0 ; gi < grades.length ; gi++ ){
                  let grade  = grades[gi];

                    zNodes.push({
                    id :  period.periodId +'|' + grade.gradeId +  '|gradeNode'  ,
                    pId :  period.periodId+ '|grade',
                    name : grade.gradeName
                  })
                }
                for(var ci = 0 ; ci < campuses.length ; ci++ ){
                  let campus  = campuses[ci];

                  zNodes.push({
                    id : period.periodId +'|' + campus.campusId + '|campusNode'  ,
                    pId :  period.periodId+ '|campus',
                    name : campus.campusName
                  })
                }
              }
              _this.initZTree(zNodes)
              _this.loadDisplayConfig()
            }
          },
          function () {
            _this.$alert('请求服务器失败')
          })
      },
      initZTree: function (zNodes) {
        this.$zTree = $.fn.zTree.init($("#treeDemo"), {
          check: {
            enable: true,
            chkboxType: {"Y": "ps", "N": "ps"}
          },
          data: {
            simpleData: {
              enable: true
            }
          }
        }, zNodes);
      },
      loadDisplayConfig: function () {
        var _this = this
        io.post(io.displayConfig, {
            areaTeamId: _this.areaTeamId
          },
          function (ret) {
            if (ret.success && ret.data) {
              let periodslist = ret.data.periods
              let ids = []
              for (var i = 0; i < periodslist.length; i++) {

                var period = periodslist[i].periodId
                var  compus = periodslist[i].campusIds;
                var  grade = periodslist[i].gradeIds;
                ids.push(period)
                for(var ci = 0;ci < compus.length; ci++){
                  let compusId = compus[ci]
                  ids.push(period + "|campus")
                  ids.push(period + "|" + compusId + "|campusNode")
                }
                for(var gi = 0 ; gi < grade.length; gi++){
                  let gradeId = grade[gi]
                  ids.push(period + "|grade")
                  ids.push(period + "|" + gradeId + "|gradeNode")
                }
                ids.forEach(element => {
                  // console.log(element)
                  let node = _this.$zTree.getNodeByParam('id', element)
                  _this.$zTree.checkNode(node, true, false)
                });
              }
            }
          },
          function () {
            _this.$alert('请求服务器失败')
          })
      }

    }
  }
</script>
<style scoped lang="less">
  .red {
    color: red;
  }
  .content-tooltip {
    unicode-bidi: embed;
    white-space: pre;
    font-size: 14px;
    line-height: 1.5;
  }
</style>
